<template>
  <t-dialog
    header="修改链"
    :visible.sync="showDialog"
    @confirm="saveForm"
    width="70%"
    :cancelBtn="null"
    :confirmBtn="null"
  >
    <t-card :bordered="false">
      <div class="form-step-container">
        

        <!-- 分步表单1 -->
        <t-form
          v-show="true"
          class="step-form"
          :data="sceneData"
          :rules="rules"
          labelAlign="right"
        >
          <t-form-item label="场景名称" name="scene_name">
            <t-input :style="{ width: '390px' }"  v-model="sceneData.scene_name"  placeholder="请输入场景名称"></t-input>
          </t-form-item>
          <t-form-item label="客户端类型" name="client_type">
            <t-select :style="{ width: '390px' }" v-model="requestData.client_type" class="demo-select-base" clearable>
              <t-option v-for="(item, index) in client_type_Options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="合约类型" name="contract_type">
            <t-select :style="{ width: '390px' }" v-model="requestData.contract_type" class="demo-select-base" clearable>
              <t-option v-for="(item, index) in contract_type_Options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="合约名" name="contract_name">
            <t-select :style="{ width: '390px' }" v-model="requestData.contract_name" class="demo-select-base" clearable>
              <t-option v-for="(item, index) in contract_name_Options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="方法名" name="contract_method">
            <t-select :style="{ width: '390px' }" v-model="requestData.contract_method" class="demo-select-base" clearable>
              <t-option v-for="(item, index) in method_name_Options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="参数大小" name="param_size">
            <t-select :style="{ width: '390px' }" v-model="requestData.param_size" class="demo-select-base" clearable>
              <t-option v-for="(item, index) in param_size_Options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="并发数" name="threads">
            <t-input :style="{ width: '280px' }" v-model="sceneData.threads" placeholder="请输入并发数"></t-input>
            <span>/s</span>                    
          </t-form-item>
          <t-form-item label="持续时间" name="runtime">
            <t-input :style="{ width: '280px' }" v-model="sceneData.runtime" placeholder="请输入持续时间"></t-input>
            <span>ms</span>                    
          </t-form-item>
        </t-form>

        <!-- 分步表单4 -->
        <div class="step-form-4" v-show="true">
          <!-- <check-circle-filled-icon style="color: green" size="52px" /> -->

          <div class="button-group">
            <t-space size="100px">
              <t-button @click="saveForm" theme="primary">更新场景</t-button>
            </t-space>
          </div>
        </div>
      </div>
    </t-card>
  </t-dialog>
</template>
<script>
import { CheckCircleFilledIcon } from "tdesign-icons-vue";
import { prefix } from "@/config/global";
import { updateSceneConfig } from "@/api/requestApi";


export default {
  name: "FormStep",
  components: {
    CheckCircleFilledIcon,
  },
  props: {
    showChildDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      checked: true,
      prefix,
      sceneData: {},

      requestData: {},
      formData3: { list: [] },
      client_type_Options: [
        { label: 'cmc', value: 0 },
        { label: 'go-sdk', value: 1 },
        { label: 'java-sdk', value: 2 },
      ],
      contract_type_Options: [
        { label: '系统合约', value: 0 },
        { label: '用户合约', value: 1 },
      ],
      contract_name_Options: [
        { label: 'T', value: 'T' },
        { label: 'docker-cut', value: 'docker_cut' },
        { label: 'docker-fact', value: 'fact' },
        { label: 'docker-evidence', value: 'evidence' },

      ],
      method_name_Options: [
        { label: 'P', value: 'P' },
        { label: 'save', value: 'save' },
        { label: 'fact', value: 'fact' },
      ],
      param_size_Options: [
        { label: '200byte', value: '200byte' },
        // { label: '500byte', value: '500byte' },
        { label: '5k', value: '5k' },
        { label: '500k', value: '500k' },
      ],
      
      rules: {
        name: [{ required: true, message: '请输入场景名称', type: 'error' }],
        client_type: [{ required: true, message: '请选择客户端类型', type: 'error' }],
        contract_type: [{ required: true, message: '请选择合约类型', type: 'error' }],
        contract_name: [{ required: true, message: '请选择合约名', type: 'error' }],
        contract_method: [{ required: true, message: '请选择方法名', type: 'error' }],
        param_size: [{ required: true, message: '请选择参数大小', type: 'error' }],
        threads: [{ required: true, message: '请输入并发数', type: 'error' }],
        runtime: [{ required: true, message: '请输入运行时长', type: 'error' }],
      },
      activeForm: 0,
    };
  },
  computed: {
    showDialog: {
      get() {
        return this.showChildDialog;
      },
      set(newValue) {
        this.$emit("update:showChildDialog", newValue); // 触发更新事件，父组件的showDialogAdd会自动更新
      },
    },
    amount() {
      if (this.sceneData.chain_config_name === "1") {
        return "565421";
      }
      if (this.sceneData.chain_config_name === "2") {
        return "278821";
      }
      if (this.sceneData.chain_config_name === "3") {
        return "109824";
      }
      return "--";
    },
  },
  methods: {
    init(data) {
      console.log("scene_modify_来自父组件的", data);

      this.data = data;
      const INITIAL_DATA1 = {
        id: data.id,
        scene_name: data.scene_name,
        threads: data.threads,
        runtime: data.runtime,
        create_time: data.create_time,
        update_time: data.update_time,
        request_id: data.request_id,
      };
      this.sceneData = { ...INITIAL_DATA1 };
      console.log("scene_modify_this_sceneData", this.sceneData);

      
      const INITIAL_DATA2 = {
        id: data.request.id,
        contract_type: data.request.contract_type,
        contract_name: data.request.contract_name,
        param_size: data.request.param_size,
        request_name: data.request.request_name,
        client_type: data.request.client_type,
        contract_method: data.request.contract_method,
        update_time: data.request.update_time,
        create_time: data.request.create_time,
      };
      this.requestData = { ...INITIAL_DATA2 };
    },

    onSubmit4() {
      this.$router.replace({ path: "/detail/advanced" });
    },
    onReset4() {
      this.activeForm = 0;
    },
    onChange(val) {
      console.log(val);
    },
    // 更新配置
    saveForm() {
      console.log("更新场景配置this_sceneData",this.sceneData);
      const params = {
        request_config: {
          request_name: this.sceneData.scene_name,
          client_type: this.requestData.client_type,
          contract_type: this.requestData.contract_type,
          contract_name: this.requestData.contract_name,
          contract_method: this.requestData.contract_method,
          param_size: this.requestData.param_size,
        },
        scene_config: {
          scene_name: this.sceneData.scene_name,
          threads: this.sceneData.threads,
          runtime: this.sceneData.runtime,
        },
        
      };
      console.log("更新场景配置");
      console.log(params);
      this.$request
        .post(updateSceneConfig(this.data.id), params)
        // .post(updateChainConfig(), params)
        .then((res) => {
          console.log("------",res)
          if (res.data.code === "200") {
            this.$message.success("保存成功");
            this.showDialog = false;
            this.$router.push("/performance/chain");
          } else {
            this.$message.fail(res.data);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../index";
</style>
